<template>
  <div class="app-container home">
    <div class="searchBox">
      <el-input placeholder="请输入设备编号..." @keyup.enter.native="findDev" v-model="searchVal" class="input-with-select">
        <el-button slot="append" @click="findDev" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <l-map
      ref="myMap"
      style="height: 86vh"
      :zoom="zoom"
      :center="center"
      @ready="doSomethingOnReady()"
    >
      <l-tile-layer
        :url="url"
        :attribution="attribution"
      ></l-tile-layer>
    </l-map>
  </div>
</template>

<script>
const baseURL = process.env.VUE_APP_BASE_API
import { getDevs } from "@/api/index";
export default {
  name: "Index",
  data () {
    return {
      marketMap:{},
      deviceMap:{},
      searchVal:'',
      // 版本号
      map: null,
      myIcon: null,
      version: "3.8.1",
      zoom: 14,
      center: L.latLng(34.232696, 117.14832),
      url: 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
      attribution: '© <a href="javascript:;">锁车系统</a> contributors'
    };
  },
  methods: {
    doSomethingOnReady () {
      this.map = this.$refs.myMap.mapObject
      this.myIcon = L.icon({
        iconUrl: './img/mark.png',
        iconSize: [76, 68],
        iconAnchor: [100, 100],
        popupAnchor: [-55, -86]
      });
      let cluster = L.markerClusterGroup()
      let content = '';
      //获取设备列表，及其坐标信息
      let devList =[];
      let that =this;
      getDevs().then(res => {
        devList=res;
        for (let k = 0; k < devList.length; k++) {
          const dev = devList[k];
          if(dev.gps&&dev.gps.length>0){
            let iconPath = './img/mark.png';
            if (dev.imagePath && dev.imagePath.length>0){
              iconPath = baseURL + dev.imagePath
            }
            content = that.createPopupCon(dev);
            let market = L.marker(dev.gps.split(","), {
              title: dev.deviceName,
              icon: L.icon({
                iconUrl: iconPath,
                iconSize: [76, 68],
                iconAnchor: [100, 100],
                popupAnchor: [-55, -86]
              }),
            }).bindPopup(content).openPopup();
            this.marketMap[dev.deviceCode] = market;
            this.deviceMap[dev.deviceCode] =  dev;
            cluster.addLayer(market);
          }
          
        }
        that.map.addLayer(cluster);
      });
      
    },
    goTarget (href) {
      window.open(href, "_blank");
    },
    findDev(){
      const that = this;
      //根据产品型号定位
      const cur = this.marketMap[that.searchVal];
      const devObj = that.deviceMap[this.searchVal];
      if(cur){
        const gps = cur.getLatLng();
        that.map.panTo(gps);
        setTimeout(function(){
          let content = that.createPopupCon(devObj);
          cur.bindPopup(content).openPopup();
        },500)
      }
    },
    createPopupCon (devObj){
      let _html = `<div id="mapDialog-container" style="width: 460px"><div>
            <div style="height: 40px;line-height: 40px;font-size: 18px;color: black;border-bottom: 1px solid #e7ebf6;font-weight: 550;">
              `+devObj.deviceName+`
            </div>
            <div style="padding-top: 10px;font-size: 16px;color: #001529;">
              <div style="display: flex;padding-bottom: 8px;">
                <div style="width: 80px;text-align: right;">设备状态：</div>
                <div
                  class="_r"
                  style="display:flex;align-items: center;"
                >`;
      let statusStr = ``;
      let statusColor = '';
      if (devObj.deviceStatue == '0'){
        statusStr='就绪';
        statusColor ='gray';
      } else if (devObj.deviceStatue == '1'){
        statusStr = '在线';
        statusColor = 'green';
      } else if (devObj.deviceStatue == '2') {
        statusStr = '离线';
        statusColor = 'red';
      } else if (devObj.deviceStatue == '3') {
        statusStr = '待锁车';
        statusColor = 'orange';
      } else if (devObj.deviceStatue == '4') {
        statusStr = '锁车';
        statusColor = 'rgb(20, 34, 99)';
      }
      if (devObj.deviceCode == null){
        devObj.deviceCode='';
      }
      if (devObj.productTypeName == null) {
        devObj.productTypeName = '';
      }
      if (devObj.customerName == null) {
        devObj.customerName = '';
      }
      if (devObj.sellTime == null) {
        devObj.sellTime = '';
      }
      if (devObj.lockTime == null) {
        devObj.lockTime = '';
      }
      _html += `<div>` + statusStr +`</div>`;
      _html += `<div style="width: 10px;height: 10px;border-radius: 10px;display: inline;margin-left: 5px;background-color: `+statusColor+`;" >&nbsp;</div>`;
      _html += `</div>
              </div>
              <div style="display: flex;padding-bottom: 8px;">
                <div style="width: 80px;text-align: right;">设备编码：</div>
                <div class="_r">`+ devObj.deviceCode +`</div>
              </div>
              <div style="display: flex;padding-bottom: 8px;">
                <div style="width: 80px;text-align: right;">产品类型：</div>
                <div class="_r">`+devObj.productTypeName+`</div>
              </div>

              <div style="display: flex;padding-bottom: 8px;">
                <div style="width: 80px;text-align: right;">所属客户：</div>
                `+ devObj.customerName +`
              </div>
              <div style="display: flex;padding-bottom: 8px;">
                <div style="width: 80px;text-align: right;">出售时间：</div>
                <div class="_r">`+devObj.sellTime+`</div>
              </div>`;
      let lockTimeStr =``;
      if (devObj.deviceStatue == '3'){
        lockTimeStr =` <div style="display: flex;padding-bottom: 8px;">
                <div style="width: 80px;text-align: right;">锁定时间：</div>
                <div class="_r">{{devObj.lockTime}}</div>
              </div>`
      }
      _html += lockTimeStr;
      _html += `<div style="display: flex;padding-bottom: 8px;"></div>
            </div>
          </div></div>`;
      return _html;
    }
  },
};
</script>

<style scoped lang="scss">
.leaflet-popup-content {
  width: fit-content !important;
  margin: 0 !important;
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.searchBox{
  position: absolute;
  width: 20vw;
  height: 50px;
  top: 3.3vh;
  z-index: 99999;
  left: 5vw;
}
</style>

